<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')

function changeCount(item){
  console.log(count.value);
  count.value++
  
}
function changeName(item){
  console.log(nickname.value);
  nickname.value = '李四'
}

//1.监视单个数据的变化
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue);
//   console.log(oldValue);
// })

//2.监视多个数据的变化
// watch([count,nickname],(newArr,oldwArr)=>{
//   console.log(newArr);
//   console.log(oldwArr);
// })


//3.immediate 立刻执行
// watch([count,nickname],(newArr,oldwArr)=>{
//   console.log(newArr);
//   console.log(oldwArr);
// },{
//   immediate:true
// })

// 4.deep 深度监视，默认 watch 进行的是 浅层监视: 
// const ref1=ref(简单类型)可以直接监视
// const ref2=ref(复杂类型)监视不到复杂类型内部数据变化
const userInfo=ref({
  username:'zs',
  age:15
})

function changeInfo(){
  userInfo.value.age++  
}

// watch(userInfo,(newValue,oldValue)=>{
//   console.log(newValue);
//   console.log(oldValue);
// },{
//   deep:true
// })

// 5.精确监听某个属性
watch(()=>userInfo.value.age,(newValue,oldValue)=>{
  console.log(newValue);
  console.log(oldValue);
})

</script>

<template>
  <header>
    <div>{{count}}</div>
    <div>{{nickname}}</div>
    <div @click="changeCount()">改数字</div>
    <div @click="changeName()">改名字</div>
    <div>----------------------------------</div>
    <div>{{ userInfo }}</div>
    <button @click="changeInfo">修改userInfo</button>
  </header>
</template>

<style scoped>
</style>
